body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  border-radius: 4px;
  // overflow-y: scroll; /* 确保滚动条始终显示以观察效果 */
}

// /* 自定义滚动条样式 */
// ::-webkit-scrollbar {
//   width: 12px; /* 滚动条的宽度 */
// }

// ::-webkit-scrollbar-track {
//   background: rgba(224, 224, 224, 0.5); /* 滚动条轨道的背景颜色，设置为透明灰色 */
//   border-radius: 4px;
// }

// ::-webkit-scrollbar-thumb {
//   background: rgba(136, 136, 136, 0.5); /* 滚动条的颜色，设置为透明灰色 */
//   border-radius: 4px;
// }

// ::-webkit-scrollbar-thumb:hover {
//   background: rgba(85, 85, 85, 0.2); /* 鼠标悬停时滚动条的颜色 */
// }

/* 滚动条设置 */
::-webkit-scrollbar {
  /* 滚动条 */
  width: 10px; // 设置为0表示不显示滚动条
  // 设置左右边距
}

::-webkit-scrollbar-thumb {
  /* 滚动条上的滚动滑块. */
  // 灰色透明
  background: rgba(136, 136, 136, 0.5);
  border-radius: 6px;
}

// ::-webkit-scrollbar-thumb:hover {
//   // 颜色流动
//   background: linear-gradient(-45deg,
//       rgba(172, 207, 243, 0.9),
//       rgba(111, 169, 155, 0.9),
//       rgba(161, 100, 151, 0.9),
//       rgba(159, 240, 240, 0.9));
//   background-size: 200% 200%;
//   border-radius: 6px;
// }